<!DOCTYPE html>
<p>There should be a blue <em>square</em> in the top-right corner of this page.</p>
<div style="position:relative; width:500px; height:100px; ">
    <div style="position:absolute; right:0; top:0; width:50px; height:25px; background:blue;"></div>
    <div id="multicol" style="position:absolute; columns:2; top:25px; right:0; width:200px;">
        <div id="abspos" style="position:absolute; width:50px; height:25px; top:0; right:0; background:blue;"></div>
        <div style="width:100px; height:100px;"></div>
    </div>
</div>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
    test(() => {
        var multicol = document.getElementById("multicol");
        var abspos = document.getElementById("abspos");
        assert_equals(abspos.offsetLeft, 150);
        multicol.style.width = "300px";
        assert_equals(abspos.offsetLeft, 250);
    }, "Resize (multicol) container of right-aligned abspos");
</script>
